<template>
    <div class="Deposit">
        <!--       公共顶部-->
        <Top>
            <i class="el-icon-arrow-left back" slot="leftPart" @click="goback()"></i>
            <p class="title" slot="midPart">充值花瓣</p>
        </Top>
        <div class="wrap">
            <!--        充值金额-->
            <h3 class="countNum">充值金额</h3>
            <!--        金额列表-->
            <ul class="countList clearfix">
                <li :class="{on:checked===index}" v-for="(item,index) in countList" @click="switchPrice(index,item)">
                    <p class="mny">{{item.mny}}</p>
                    <p class="flr">{{item.flr}}花瓣</p>
                </li>
                <li class="otherNum" :class="{on:checked=== -1}" @click="otherTyping">
                    <p class="mny">其他金额</p>
                    <p class="inp" ><span>￥</span><input type="number" v-model="otherCount" :autofocus="checked=== -1" @keyup="otherAuto" /></p>
                    <p class="flr">{{otherCount}}花瓣</p>
                </li>
            </ul>
            <!--支付方式-->
            <h3 class="countNum">选择支付方式</h3>
            <!---->
            <ul class="payStyle">
                <!--根据浏览器判断支付方式-->
                <li v-if="payType===1"> 
                    <svg class="icon" style="color:#00aaef;" aria-hidden="true"><use xlink:href="#icon-big-Pay"></use></svg>
                    <span>支付宝</span>
                    <!--选中图标-->
                    <svg class="icon right" aria-hidden="true"><use xlink:href="#icon-radio"></use></svg>
                </li>
                <li v-if="payType===2"> 
                    <svg class="icon" style="color:#52a549;" aria-hidden="true"><use xlink:href="#icon-wechat"></use></svg>
                    <span>微信</span>
                    <!--选中图标-->
                    <svg class="icon right" aria-hidden="true"><use xlink:href="#icon-radio"></use></svg>
                </li>
            </ul>
        </div>
        <!---->
        <h4 class="accept">点击充值，即代表阅读并同意<span style="color:#de6940;">《充值协议》</span></h4>
        <!--确认充值-->
        <div class="confirmBn"><el-button type="primary" :loading="confirmState==0" @click="confirm">{{confirmTextL}}</el-button></div>

    </div>
</template>

<script>
    //导入相关组件
    import Top from '@/components/smallCom/Top'
    export default {
        name: 'Deposit',
        components: {
            Top,//顶部信息组件
        },
        data () {
            return {
                checked:0,//默认选中价格
                otherCount:'',//默认其他金额
                countList:[
                    {
                        mny:50,
                        flr:50
                    },{
                        mny:100,
                        flr:100
                    },{
                        mny:200,
                        flr:200
                    },{
                        mny:500,
                        flr:500
                    },{
                        mny:1000,
                        flr:1000
                    }
                ],//充值价格列表

                confirmState:1,//是否可点击
                confirmTextL:'去充值',//充值按钮文本

                payType:0,//1：支付宝支付，2：微信支付
                checkedPrice:50,//充值金额
            }
        },
        created(){
            //初始化判断浏览器
            this.payType = this.isWeiXin()?2:1;
        },
        mounted(){

            window.payResult = this.payResult
        },
        methods:{
            //选择充值金额
            switchPrice(index,item){
                if(index=== this.checked)return;
                this.checked = index;
                this.checkedPrice = item.mny;
            },
            //其他金额输入
            otherTyping(){
                this.checked = -1;
                this.checkedPrice = this.otherCount;
            },
            //其他金额 输入完毕更改
            otherAuto(){
                this.checkedPrice = this.otherCount;
            },
            //确认充值
            confirm(){
                if(!this.checkedPrice || parseFloat(this.checkedPrice) <= 0){
                    this.$message.warning('请填写正确的金额');
                    return;
                }
                this.confirmState = 0;
                this.confirmTextL = '充值中..';
                //ajax
                this.Posthttp('/?method=flower.buy.recharge',{member_id:this.getMemberId(),amount:this.checkedPrice,pay_type:this.payType},(res)=>{
                    this.confirmState = 1;
                    this.confirmTextL = '去充值';
                    /*登录是否成功*/
                    if(JSON.parse(res.bodyText).status ===1){

                        if(this.deviceType() === 1){//安卓
                            window.hy.reCharge(this.getMemberId(),this.checkedPrice)
                        }else if( this.deviceType() === 2 ){//IOS
                            window.webkit.messageHandlers.reCharge.postMessage( JSON.stringify({amount:this.checkedPrice,token:this.getMemberId()}) ) 
                        }else{
                            window.location.href = JSON.parse(res.bodyText).data.payurl
                        }

                    }else{
                        this.$message.warning(JSON.parse(res.bodyText).msg); 
                    }
                });
            },
            //app支付完成
            payResult(state){

                if(state === '1' || state === 1){
                    this.$message.success('支付成功')
                    this.$router.replace('/bag/myFlower')
                }else{
                    this.$message.warning('支付失败')
                }

            }

        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .Deposit {
        .wrap{
            position: fixed;
            top: .8rem;
            bottom: 1.7rem;
            left: 0;
            right: 0;
            overflow-y: auto;
            background-color: #fff;
        }
        .countNum{
            font-size: .26rem;
            color: #333;
            padding: .3rem .2rem;
        }
        .countList{
            padding: 0 .2rem;
            li{
                width: 48%;
                background-color: #f2f2f2;
                padding: .3rem 0;
                margin-bottom: .2rem;
                float: left;
                border-radius: .1rem;
                text-align: center;
                line-height: .38rem;
                &:nth-of-type(2n){
                    margin-left: 4%;
                }
                &.on{
                    background-color: #de6940;
                    .mny,.flr{
                        color: #fff;
                    }
                }
                .mny{
                    font-size: .32rem;
                    color: #333;
                }
                &.otherNum{
                    .inp{
                        display: none;
                    }
                    input{
                        width: 40%;
                        border: 0;
                        outline: none;
                        background: transparent;
                        text-align: center;
                        border-bottom: 1px solid #fff;
                        color: #fff;
                    }
                }
                &.otherNum.on{
                    .inp{
                        color: #fff;
                        display: block;
                    }
                    .mny{
                        display: none;
                    }
                }
                .flr{
                    font-size: .22rem;
                    color: #999;
                }
            }
        }
        /*支付方式*/
        .payStyle{
            li{
                font-size: .26rem;
                padding: .2rem;
                position: relative;
                .icon{
                    font-size: .55rem;
                    &.right{
                        color: #de6940;
                        font-size: .4rem;
                        position: absolute;
                        right: .2rem;
                        top: calc(50% - .18rem);
                    }
                }

            }
        }
        /*同意协议*/
        .accept{
            width: 100%;
            text-align: center;
            margin-top: .5rem;
            position: fixed;
            bottom: 1.3rem;
            left: 0;
        }
        /*确认充值*/
        .confirmBn{
            width: 100%;
            text-align: center;
            padding: .1rem .2rem;
            border-top: 1px solid #e4e4e4;
            position: fixed;
            bottom: 0;
            left: 0;
            button{
                width: 100%;
                height: .8rem;
                font-size: .28rem;
                letter-spacing: 1px;
                background: #de6940;
            }
        }
    }
</style>
